﻿<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>文本框获取焦点弹出下拉框</title>
    <script type="text/javascript" language="JavaScript">
        let oRegion = document.getElementById("txtRegion");   //需要弹出下拉列表的文本框
        let oDivList = document.getElementById("divList"); //要弹出的下拉列表
        let oClose = document.getElementById("tdClose");　　　//关闭div的单元格，也可使用按钮实现
        let colOptions = document.getElementsByTagName("li"); //所有列表元素
        let bNoAdjusted = true;
        oClose.onclick = function (){
            oDivList.style.display = "none";    // 隐藏div，实现关闭下拉框的效果
        };
        // 设置下列选择项的一些事件
        for(let i = 0;i< colOptions.length;i++){
            colOptions[i].style.cursor = "hand";
            colOptions[i].onclick = function (){
                // 为列表项添加单击事件
                oRegion.value = this.innerText;
            };
            colOptions[i].onmouseover = function (){
                // 为列表项添加鼠标移动事件
                this.style.backgroundColor = "#ffff00";
            };
            colOptions[i].onmouseout = function()  //为列表项添加鼠标移走事件
            {
                this.style.backgroundColor = "";
            };
            
        }
        // 文本获得焦点时的事件
        oRegion.onfocus = function(){
            oDivList.style.display = "block";
            if(bNoAdjusted){
                // 控制div是否已经显示的变量
                bNoAdjusted = false;
                // 设置下拉列表的宽度和位置
                oDivList.style.width = this.offsetWidth + 50;
                oDivList.style.posTop = oDivList.offsetTop + this.offsetHeight;
                oDivList.style.posLeft = oDivList.offsetLeft - this.offsetWidth - 8;
            }
        }
        
    </script>
</head>
<body>

<table border="0" cellpadding="0" cellspacing="0">
    <tr>
        <td>所属区域</td>
        <td>
            <input type="text" id="txtRegion" />
            <div id="divList" 
                 style="display: none; border: 1px solid #0000aa; 
                 overflow: hidden; height: 150px; position: absolute; background-color: #ccffff;">
                <table width="100%" border="0" 
                       cellpadding="0" cellspacing="0">
                    <tr>
                        <td>
                            <div style="overflow: auto; width: 100%; height: 132px; 
                            background-color: #ffffcc;">
                                <ul><b>中国</b>
                                    <ul><b>华北地区</b>
                                        <li>北京</li>
                                        <li>天津</li>
                                        <li>内蒙古</li>
                                        <li>河北</li>
                                        <li>河南</li>
                                    </ul>
                                    <ul><b>华东地区</b>
                                        <li>上海</li>
                                        <li>江西</li>
                                        <li>江苏</li>
                                        <li>浙江</li>
                                    </ul>
                                </ul>
                            </div>
                        </td>
                    </tr>
                    <tr>
                        <td align="right" id="tdClose" style="cursor: hand; background-color: #ff8888;">Close</td>
                    </tr>
                </table>
            </div>
        </td>
    </tr>
</table>

</body>
</html>